<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看公告</title>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

    <style>
        .headerBg {
            background: #eee!important;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div>
            <div style="margin: 10px 0">
                <!--搜索栏-->
                <el-form :inline="true" :model="NoticeSearchForm" class="demo-form-inline">
                    <el-form-item label="名称">
                        <el-input v-model="NoticeSearchForm.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-date-picker
                            v-model="NoticeSearchForm.date"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="warning" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="content" label="内容">
                    <template v-slot="scope">
                        <el-button type="primary" @click="view(scope.row.content)">查看内容</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="发布时间"></el-table-column>
                <el-table-column prop="author" label="发布人"></el-table-column>
                <el-table-column prop="click" label="点击量"></el-table-column>
                <el-table-column prop="uppid" label="置顶">
                    <template slot-scope="scope">
                        <el-tag type="success" effect="dark" v-if="scope.row.uppid=='0'">未置顶</el-tag>
                        <el-tag type="danger" effect="dark" v-if="scope.row.uppid=='1'">置顶</el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="内容" :visible.sync="dialogFormVisible1" width="60%" :close-on-click-modal="false">
                <el-card>
                    <pre style="line-height: 28px; word-wrap: break-word;white-space: pre-wrap;"><div v-html="content"></div></pre>

                </el-card>
            </el-dialog>


            <div style="padding: 10px 0">
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>
    </template>

</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            tableData: [],
            total: 0,
            currentPage: 1,
            pageSize: 5,
            title: "",
            date:[],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            dialogFormVisible2:false,
            content:"",
            value: '',
            editForm:{},
            addForm:{},
            NoticeSearchForm:{}
        },
        created(){
            this.currentPage=1;
           this.initTable();
        },
        methods: {
            reset() {
                this.NoticeSearchForm={}
                this.initTable();
            },

            //分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val
                this.initTable();
            },
            //搜索查询
            onSubmit(){
                this.currentPage=1;
                this.initTable();
            },

            view(content) {
                console.log(content)
                this.content = content;
                this.dialogFormVisible1 = true;
            },
            initTable(){
                axios.post("/notice/noticeList?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.NoticeSearchForm).then(resp=>{
                    console.log(resp);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            },
        }
    });
</script>
</body>
</html>